<template>
    <div class="box-box">
        <div
            class="box-item"
            :key="item"
            v-for="item in modelValue"
            @click="clickItem(item)"
        >
            <div class="item-content2" :class="{selected:item[cell.select]}">
                <slot name="default" :item="item">
                    <MyImg class="item-icon" :src="item[cell.icon]" :autoPreview="false" />
                    <div class="item-title">{{ item[cell.title] }}</div>
                </slot>
                <el-icon v-if="item[cell.select]" class="selectedIcon"><success-filled /></el-icon>
            </div>
        </div>
    </div>
</template>

<script>

import {inject} from 'vue';
import {SuccessFilled} from '@element-plus/icons-vue'

export default {
    name: "MyBoxGrid",
    components:{
        SuccessFilled
    },
    emits: ["updateModelValue", "click"],
    setup(){
        const MyPage = inject("MyPage",{});
        return {
            MyPage
        }
    },
    props: {
        modelValue: Array,
        column: {
            type: Number,
            default: 4,
        },
        cell: Object,
    },
    created() {
        this.colWidth = 100.0 / this.column + "%";
    },
    data() {
        return {
            colWidth: "25%",
        };
    },
    methods: {
        clickItem(item) {
            this.$emit("click", item, this, this.MyPage);
        },
    },
    watch: {
        column(val) {
            this.colWidth = 100.0 / this.column + "%";
        },
    },
};
</script>

<style scope>
.box-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    user-select: none;
}

.box-box .box-item {
    text-align: center;
    position: relative;
}

.box-box .box-item > .item-content2 {
    border: 1px solid #eee;
    margin: 4px;
    padding: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.box-box .box-item > .selected {
    background-color: skyblue;
}

.item-content2 .selectedIcon{
    position: absolute;
    right: 2px;
    top:2px;
    font-size: 22px;
    color: #4e5dc9;
}

.box-box .box-item {
    flex-basis: v-bind(colWidth);
    padding-bottom: v-bind(colWidth);
    height: 0;
}

.item-icon {
    width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 75%;
    object-fit: contain;
    cursor:pointer;
}

div.item-title{
    cursor:pointer;
}
</style>